<%@ page import="mvc.model.pojos.UserBean" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>账号管理</title>
	<style type="text/css">
		@font-face {
			font-family: 'iconfont';
			src: url('${pageContext.request.contextPath}/static/css/font/iconfont.eot');
			src: url('${pageContext.request.contextPath}/static/css/font/iconfont.eot?#iefix') format('embedded-opentype'), url('${pageContext.request.contextPath}/static/css/font/iconfont.woff2') format('woff2'), url('${pageContext.request.contextPath}/static/css/font/iconfont.woff') format('woff'), url('${pageContext.request.contextPath}/static/css/font/iconfont.ttf') format('truetype'), url('${pageContext.request.contextPath}/static/css/font/iconfont.svg#iconfont') format('svg');
		}
		.iconfont {
			font-family: "iconfont" !important;
			font-size: 16px;
			font-style: normal;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
		}
	</style>
	<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/accountManagement.css" />
	<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-3.1.0.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/accountManagement.js"></script>
	<script>
		$(function () {
			$("from").submit(function () {
				return false;
			});
		});
		let userid = <%
			Cookie[] cookies = request.getCookies();
			for (Cookie cookie : cookies) {
				if (cookie.getValue().equals("user")){
					out.print(cookie.getValue());
				}
			}
		%>;


	</script>
</head>

<body style="min-height: 848px;">

<div id="content" class="content">
	<!--账号管理头部-->
	<div id="header-top" class="headWrap">
		<!--商标-->
		<a class="headLogo">
			<i class="i_icon"></i>
		</a>
		<!--导航栏-->
		<ul class="headLeft">
			<!--魅族商城-->
			<li class="head-store">
				<script>
					$(function () {
						$(".head-store").click(function () {
							location.href = "index.jsp";
						});
					});
				</script>
				<a target="_blank">
					<i class="i_icon"></i>
				</a>
			</li>
			<!--产品-->
			<li class="head-products">
				<a target="_blank">
					<i class="i_icon"></i>
				</a>
			</li>
			<!--专卖店-->
			<li class="head-retail">
				<a target="_blank">
					<i class="i_icon"></i>
				</a>
			</li>
			<!--Flyme-->
			<li class="head-flyme">
				<a target="_blank">
					<i class="i_icon"></i>
				</a>
			</li>
			<!--服务-->
			<li class="head-services">
				<a target="_blank">
					<i class="i_icon"></i>
				</a>
			</li>
			<!--社区-->
			<li class="head-bbs">
				<a target="_blank">
					<i class="i_icon"></i>
				</a>
			</li>
		</ul>
		<!--个人退出 顶部的右边-->
		<div class="headRight">
					<span id="loginWrap">
						<a id="head-name" class="linkAGray" title="${sessionScope.user.username}" href="accountManagement.jsp">${sessionScope.user.username}</a>
						<span class="none" id="show-msg-pub">1</span>
					<span class="line_head">|</span>
					<a id="head-logout" class="linkAGray">退出</a>
					</span>
		</div>
	</div>
	<!--账号管理中部-->
	<div class="flymeContent">
		<div id="navWrap" class="navWrap">
			<ul class="nav">
				<li id="accountManage">
					<a class="linkABlue">
						账号管理
					</a>
					<div class="current"></div>
				</li>
				<li id="contact">
					<a class="linkAGray">魅币</a>
				</li>
			</ul>
		</div>
		<div class="clear"></div>
		<div class="topWrap">
			<!--头像-->
			<div class="top-leftWrap">
				<img id="userImg" src="${pageContext.request.contextPath}/static/img/3.jpg" />
				<a class="modifyIconTip modify" id="modifyIconTip">编辑头像</a>
				<a class="modifyIconTip-bg"></a>
			</div>
			<!--名称-->
			<div class="top-rightWrap">
				<div class="lineWrap nickname" id="nickNameTitle">
					<input readonly="readonly" id="nickName" title="${sessionScope.user.username}" value="${sessionScope.user.username}" />
					<a class="pointer modify" id="nickNameEdite">
						<i class="i_icon"></i>
					</a>
				</div>
				<!--修改昵称-->
				<div id="nickNameCon" class="lineWrap modify_content nickNameCon">
					<!--不对表单的输入内容进行验证-->
					<form style="display:inline" novalidate="novalidate">
						<div class="lineWrap">
							<span class="error-one" style="color: red;font-size: 14px;margin-left: 20px;display: none;">请填写名称</span>
							<span class="error-one" style="color: red;font-size: 14px;margin-left: 20px;display: none;">昵称已存在</span>
						</div>
						<div class="clear"></div>
						<div class="edit">
							<a class="fullBtnBlue save_form fleft" id="editSave">保存</a>
							<a class="fullBtnGray cancel_form fleft" id="editCancel">取消</a>
						</div>
						<script>
							$(function () {
								$("#editSave").click(function () {
									let name = $("#nickName").val();
									$.ajax({
										url: "/userName",
										type: "POST",
										dataType: "json",
										data: {
											username: name
										}
									}).done(function (data) {
										if (data) {
											location.href = "";
										} else {
											alert("修改失败!")
										}
									});
								});
							});
						</script>
						<div class="clear"></div>
					</form>
				</div>
			</div>
			<!--设置账号-->
			<div class="lineWrap grayTip ftop" id="setUserNameWrap">
				<a id="setuserName" class="blue modify">设置 Flyme 账号</a>
			</div>
			<!--修改账号-->
			<div id="setaccount" class="modify_content">
				<form novalidate="novalidate" class="modify_contentMove">
					<div>
						<div class="normalInput">
							<input type="text" name="account" id="flyme" class="username" maxlength="32" placeholder="账号" />
							<span class="grayTip flymeSpan">@flyme.cn</span>
						</div>
						<span class="error-one" style="color: red;font-size: 14px;margin-left: 20px;display: none;">请填写账号</span>
						<span class="error-one" style="color: red;font-size: 14px;margin-left: 20px;display: none;">账号长度不对，需输入4-32位</span>
						<div class="clear"></div>
						<label class="flymeTip">账号保存后不可修改</label>

					</div>
					<div class="clear"></div>
					<div class="fBtnleft">
						<a class="fullBtnBlue save_form fleft" id="newSave">保存</a>
						<a class="fullBtnGray cancel_form fleft" id="newCancel">取消</a>
						<div class="clear"></div>
					</div>
				</form>
			</div>
		</div>
		<div class="clear"></div>
	</div>
	<!--账号安全-->
	<div class="mainWrap" style="margin: 0 auto">
		<div class="titleWrap grayBorderB grayBorderTop">
			<div class="title-leftWrap">
				<span>账号安全</span>
			</div>
			<div class="title-rightWrap">
				<span>安全等级：</span>
				<span class="green" id="safeLevel">80</span>
				<a class="pointer" id="safeLevelTip">
					<i class="i_icon"></i>
				</a>
			</div>
			<div class="clear"></div>
		</div>
		<!--密码-->
		<div class="bodyWrap">
			<!--密码修改-->
			<div class="lineWrap pwdWrapTop" id="pwdWrap">
				<div class="item-right">
					<a class="linkABlue modify" id="modifyPassword">修改</a>
				</div>
				<div class="item-left">密码</div>
				<!--<div class="item-middle"></div>-->
				<div class="clear"></div>
			</div>
			<!--密码修改页面-->

		</div>
		<!--邮箱修改-->
		<div id="emailWrap" class="lineWrap">
			<div class="item-right">
				<a id="emailBind" class="linkABlue modify">绑定</a>
			</div>
			<div class="item-left">邮箱</div>
			<!--进行判断if 未绑定-->
			<div class="item-middle" id="email-item-middle2">
				<span class="bold">${sessionScope.user.uemail==null?'未绑定':sessionScope.user.uemail}</span><br />
				<c:if test="${sessionScope.user.uemail==null}">
					<span class="grayTip">绑定后可通过邮箱找回密码</span>
				</c:if>
			</div>
			<div class="clear"></div>
			<!--邮箱修改页面-->

		</div>
		<!--手机修改-->
		<div id="telWrap" class="lineWrap">
			<div class="item-right">
				<a id="editMobile" class="linkABlue modify">修改</a>
			</div>
			<div class="item-left">手机号码</div>
			<!--进行判断if 已验证手机-->
			<div class="item-middle" id="telModify">
				<span id="current_phone" class="bold"><%
					UserBean user = (UserBean) request.getSession().getAttribute("user");
					String phone = user.getPhone();
					if (phone == null) {
						out.print("未绑定");
					} else {
						out.print(phone.replaceAll("(\\d{3})\\d{4}(\\d{4})", "$1****$2"));
					}
				%></span>
				<br />
				<c:if test="${sessionScope.user.phone == null}">
					<span class="grayTip">已验证，可通过手机找回密码</span>
				</c:if>
			</div>
			<!--手机修改页面-->

		</div>
		<!--密保问题-->
		<div id="questionWrap" class="lineWrap">
			<div class="item-left">密保问题</div>
			<div id="questionModifyTip" class="item-right">
				<a id="modifySafe" class="linkABlue modify">修改</a>
			</div>
			<div id="questionSettedTip" class="item-middle">
				<span id="tip" class="bold">已设置</span>
				<br />
				<span class="grayTip">可通过密保问题找回密码</span>
			</div>
			<!--密保修改页面-->

		</div>
	</div>
</div>
</div>
<!--底部-->
<div id="flymeFooter" class="footerWrap" style="top: 848px;">
	<div class="footerInner">
		<div class="footer-layer1">
			<!--底部导航栏-->
			<div class="footer-innerLink">
				<a title="关于魅族" target="_blank">关于魅族</a>
				<img src="${pageContext.request.contextPath}/static/img/space.gif" class="foot-line" />
				<a title="工作机会" target="_blank">工作机会</a>
				<img src="${pageContext.request.contextPath}/static/img/space.gif" class="foot-line" />
				<a title="联系我们" target="_blank">联系我们</a>
				<img src="${pageContext.request.contextPath}/static/img/space.gif" class="foot-line" />
				<a title="法律声明" target="_blank">法律声明</a>
				<img src="${pageContext.request.contextPath}/static/img/space.gif" class="foot-line" />
				<a title="常见问题" target="_blank">常见问题</a>
				<img src="${pageContext.request.contextPath}/static/img/space.gif" class="foot-line" />
				<div id="globalName" class="footer-language" title="简体中文">
					简体中文&nbsp;&nbsp;&nbsp;
					<div id="globalContainer" class="footer-language_menu" style="left: 508px; display: none;">
						<a id="i18n-link" title="English" class="ClobalItem">English</a>
					</div>
				</div>
			</div>
			<!--客服热线	-->
			<div class="footer-service">
				<span class="service-label">客服热线</span>
				<span class="service-num">400-788-3333</span>
				<a class="service-online" id="service-online" title="在线客服">在线客服</a>
			</div>
			<!--图标-->
			<div class="footer-outerLink">
				<a class="footer-sinaMblog" target="_blank">
					<i class="i_icon"></i>
				</a>
				<a class="footer-weChat" target="_blank" id="footer-weChat">
					<i class="i_icon"></i>
				</a>
				<a class="footer-qzone" target="_blank">
					<i class="i_icon"></i>
				</a>
			</div>
		</div>
		<div class="clear"></div>
		<div id="flymeCopyright" class="copyrightWrap">
			<div class="copyrightInner">
				<span>©2019 Meizu Telecom Equipment Co., Ltd. All rights reserved.</span>
				<a class="linkAGray" target="_blank">备案号: 粤ICP备13003602号-4</a>
				<a class="linkAGray" target="_blank">经营许可证编号: 粤B2-20130198</a>
				<a class="linkAGray" target="_blank">营业执照</a>
			</div>
		</div>
	</div>
</div>
<!--弹窗-->
<div class="mzdialog" id="mzdialog1">
	<div class="alertDialog">
		<div class="alertDialogTitle">
			<label class="alertDialogTitleTip">提示</label>
			<a class="alertDialogClose ">
				<i class="i_iconOne"></i>
			</a>
		</div>
		<div class="alertDialogMain">
			<div class="alertDialogContent">设置密码+20，验证邮箱+20，绑定手机号+30，设置密保问题+30，账号安全等着你拿100满分哦</div>
		</div>
		<div class="alertDialogBtnField ">
			<a class="fullBtnBlue alertDialogSure" onclick="app()">确定</a>
		</div>
	</div>
</div>
<!--密码修改弹窗-->
<div id="id01" class="modal">
	<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
	<form class="modal-content animate" action="/uppass" method="post">
		<div class="setQuestion-titleWrap">
			<span>修改密码（验证密码）</span>
		</div>
		<div class="container">
			<label><b>账号</b></label>
			<input type="text" placeholder="请输入账号" name="name" required>

			<label><b>原密码</b></label>
			<input type="password" placeholder="请输入原始密码" name="password" required>

			<label><b>修改密码</b></label>
			<input type="password" placeholder="请输入重置密码" name="repeat-password" required>
			<input type="checkbox" checked="checked">记住我

			<div class="clearfix">
				<button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">取消</button>
				<button type="submit" class="signupbtn">修改</button>
			</div>
			<script>
				$(function () {
					let un = `${sessionScope.user.uname}`;
					let up = `${sessionScope.user.upass}`;
					$("#id01 form").submit(function () {
						let name = document.getElementsByName("name")[0].value;
						let pass = document.getElementsByName("password")[0].value;
						return name === un && pass === up;
					});
					$("#id02 form").submit(function () {
						let name = document.getElementsByName("name")[1].value;
						let pass = document.getElementsByName("password")[1].value;
						return name === un && pass === up;
					});
					$("#id03 form").submit(function () {
						let name = document.getElementsByName("name")[2].value;
						let pass = document.getElementsByName("password")[2].value;
						return name === un && pass === up;
					});
				});
			</script>
		</div>
	</form>
</div>
<!--邮箱绑定弹窗-->
<div id="id02" class="modal">
	<span onclick="document.getElementById('id02').style.display='none'" class="close" title="Close Modal">×</span>
	<form class="modal-content animate" action="/upemail">
		<div class="setQuestion-titleWrap">
			<span>绑定邮箱（验证密码）</span>
		</div>
		<div class="container">
			<label><b>账号</b></label>
			<input type="text" placeholder="请输入账号" name="name" required>

			<label><b>密码</b></label>
			<input type="password" placeholder="请输入密码" name="password" required>

			<label><b>邮箱</b></label>
			<input type="text" placeholder="请输入邮箱" name="email" required>
			<input type="checkbox" checked="checked">记住我

			<div class="clearfix">
				<button type="button" onclick="document.getElementById('id02').style.display='none'" class="cancelbtn">取消</button>
				<button type="submit" class="signupbtn">绑定</button>
			</div>
		</div>
	</form>
</div>
<!--手机号绑定弹窗-->
<div id="id03" class="modal">
	<span onclick="document.getElementById('id03').style.display='none'" class="close" title="Close Modal">×</span>
	<form class="modal-content animate" action="/uppass" method="get" >
		<div class="setQuestion-titleWrap">
			<span>绑定手机号（验证密码）</span>
		</div>
		<div class="container">
			<label><b>账号</b></label>
			<input type="text" placeholder="请输入账号" name="name" required>

			<label><b>密码</b></label>
			<input type="password" placeholder="请输入密码" name="password" required>

			<label><b>手机号</b></label>
			<input type="text" placeholder="请输入手机号" name="phone" required>
			<input type="checkbox" checked="checked">记住我

			<div class="clearfix">
				<button type="button" onclick="document.getElementById('id03').style.display='none'" class="cancelbtn">取消</button>
				<button type="submit" class="signupbtn">绑定</button>
			</div>
		</div>
	</form>
</div>
<div class="cover"></div>
</body>
</html>